<template>
  <div style="background-color: aliceblue; max-height: 100%;">
    <div class="hea">
      <div>聊天界面</div>
      <div style="line-height: normal;font-size: 16px;">当前用户：<span style="color: #409EFF">{{ friend.userName }}</span></div>
    </div>
    <div style="overflow-y: auto; height: 680px" ref="chatRoom">
      <div>
        <el-row v-for="mes in messageList" :key="mes.id">
          <div v-show="friend.friendId=== mes.fromUser.id.toString()" style="margin-right: 50%;margin-top: 15px; margin-left: 10px">
            <el-col :span="2">
              <el-avatar :src="mes.fromUser.avatar"/>
            </el-col>
            <el-col :span="12">
              <div style="border-radius: 7px; background-color: pink; line-height: 25px;">
                <div style="padding-left: 10px; font-size: 14px">{{ mes.context }}</div>
                <div style="color: white; font-size: 12px; padding-left: 10px">{{ mes.sendTime }}</div>
              </div>
            </el-col>
          </div>
          <div v-show="friend.friendId !== mes.fromUser.id.toString()"
               style="margin-left: 50%; text-align: right; margin-top: 15px; margin-right: 10px">
            <el-col :span="10">&nbsp;</el-col>
            <el-col :span="12">
              <div style="border-radius: 7px; background-color: plum; line-height: 25px;">
                <div style="padding-right: 10px; font-size: 14px">{{ mes.context }}</div>
                <div style="color: white; font-size: 12px; padding-right: 10px">{{ mes.sendTime }}</div>
              </div>
            </el-col>
            <el-col :span="2">
              <el-avatar :src="mes.fromUser.avatar"/>
            </el-col>
          </div>
        </el-row>
      </div>
    </div>
    <div>
      <el-input placeholder="请输入内容" v-model="input" @keyup.enter.native="send">
        <el-button slot="append" @click="send">发 送</el-button>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: "talk",
  data() {
    return {
      timer: '',
      friend: {},
      input: '',
      currentUser: {},
      messageList: []
    }
  },
  created() {
    this.friend = this.$route.query;
    this.getMessage();
    this.getUserByName();
  },
  mounted() {
    this.timer = setInterval(this.getMessage, 6000);
    this.scrollToBottom();
  },
  updated() {
    this.scrollToBottom();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    send() {
      const token = JSON.parse(localStorage.getItem("loginMes"));
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.post("/message-record/send", {
          friendId: this.friend.friendId,
          context: this.input
        }, {
          headers: {
            token: token.token
          }
        }).then(res => {
          if (res.data.code === '200') {
            this.getMessage();
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
      this.input = '';
    },
    scrollToBottom() {
      // 聊天定位到底部
      let chatRoom = this.$refs.chatRoom    //通过$refs获取到该元素
      chatRoom.scrollTop = chatRoom.scrollHeight
    },
    getUserByName() {
      const token = JSON.parse(localStorage.getItem("loginMes"));
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.get("/sys-user/detail",
          {
            params: {
              name: token.userName
            },
            headers: {
              token: token.token
            }
          }).then(res => {
          if (res.data.code === '200') {
            this.currentUser = res.data.data;
            this.temp = JSON.parse(JSON.stringify(res.data.data));
          } else {
            this.$message.error(res.data.data);
          }
        })
      }
    },
    getMessage() {
      const token = JSON.parse(localStorage.getItem("loginMes"));
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.post("/message-record/message/list", {
          friendId: this.friend.friendId
        }, {
          headers: {
            token: token.token
          }
        }).then(res => {
          if (res.data.code === '200') {
            this.messageList = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.hea {
  color: black;
  line-height: 30px;
  background-color: lightblue;
  text-align: center;
  font-size: 20px;
  overflow-y: auto;
}
</style>
